<template>
  <div class="snow-page">
    <div class="snow-inner">
      <a-form ref="formRef" auto-label-width :model="formData.form">
        <a-row :gutter="16">
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
            <a-form-item field="name" label="乡镇">
              <a-select v-model="formData.form.name" placeholder="请选择" allow-search allow-clear>
                <a-option v-for="item in optionsList" :key="item.id" :label="item.name" :value="item.id">
                </a-option>
              </a-select>

            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
            <a-space class="search-btn">
              <a-button type="primary" @click="getCommonTableList">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="onReset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>

            </a-space>
          </a-col>
        </a-row>

      </a-form>
      <a-table row-key="key" size="small" :bordered="{
        cell: true
      }" :scroll="{ x: '100%', y: '100%', minWidth: 1200 }" :loading="loading" :columns="columns" :data="tableData"
        :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :pagination="pagination"
        @page-change="pageChange" @page-size-change="pageSizeChange">
        <template #complaintDate="{ record }">
            {{formatDate(record.complaintDate)}}
        </template>

        <template #optional>
          <a-space>
            <a-button size="mini" type="primary">详情</a-button>
            <a-button size="mini">修改</a-button>
            <a-popconfirm content="确定删除这条数据吗?" type="warning">
              <a-button size="mini" type="primary" status="danger">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getxfPetitionsList } from "@/api/modules/xfPetition/index";
import { getCommTownsAPI } from "@/api/modules/commTowns/index";
import { List, FormData, RowSelection, Pagination } from "./config";
const formData = reactive<FormData>({
  form: {
    name: "",
    phone: "",
    email: "",
    address: "",
    status: null
  },
  search: false
});
const optionsList = ref([]) as any
const selectedKeys = ref<string[]>([]);
const rowSelection = reactive<RowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false
});
const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange = (page: number) => {
  pagination.value.current = page;
};
const pageSizeChange = (pageSize: number) => {
  pagination.value.pageSize = pageSize;
};
function formatDate(val: any) {
    const date = new Date(val);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 加1并补零
    const day = String(date.getDate()).padStart(2, '0'); // 补零

    return `${year}-${month}-${day}`;
}
const columns = [
{
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "投诉日期",
    dataIndex: "complaintDate",
    slotName:"complaintDate",
    width:120
  },
  {
    title: "投诉方式",
    dataIndex: "complaintMethod",
    width: 120
  },
  {
    title: "信访性质",
    dataIndex: "petitionType",
    width: 120
  },
  {
    title: "投诉分类",
    dataIndex: "complaintCategory",
    width:120
  },
  {
    title: "任务来源",
    dataIndex: "taskSource",
    width:120
  },
  {
    title: "污染源种类",
    dataIndex: "pollutionType",
    align: "center",
    width:120
  },
  {
    title: "投诉人姓名",
    dataIndex: "complainantName",
    width:120
  },
  {
    title: "投诉人电话",
    dataIndex: "complainantPhone",
    width:130
  },
  {
    title: "投诉人地址",
    dataIndex: "complainantAddress",
    width:120
  },
  {
    title: "所属街道",
    dataIndex: "streetDictMap.name",
    width:120
  },
  {
    title: "被投诉单位",
    dataIndex: "accusedUnitName",
    width:120
  },
  {
    title: "被投诉单位地址",
    dataIndex: "accusedUnitAddress",
    width:140
  },
  //accusedUnitAddress
  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];
const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  getCommonTableList();
};
const loading = ref<boolean>(false);
const tableData = ref([]);
const getCommonTableList = async () => {
  let obj = {
    "xfPetitionDtoFilter": {
      "street": formData.form.name
    },
    "orderParam": null,
    "pageParam": {
      "pageNum": pagination.value.current,
      "pageSize": pagination.value.pageSize,
      "count": true
    }
  }
  try {
    loading.value = true;
    let res = await getxfPetitionsList(obj) as any;
    // Object.assign(data, res.data.list);
    tableData.value = res.data.dataList
    pagination.value.total = res.data.totalCount;
  } finally {
    loading.value = false;
  }
};
getCommonTableList();

onMounted(() => {
  intiData()
})
async function intiData() {
  let res = await getCommTownsAPI() as any
  if (res.success) {
    optionsList.value = res.data
  }
}
</script>

<style lang="scss" scoped>
.search-btn {
  margin-bottom: 20px;
}
</style>